<template>
  <div class="add_hospital_page">
    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div class="menu_cell" :class="step == item.id ? 'menu_cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content">
      <el-form ref="addForm" :model="addForm" class="add_form" :rules="addFormRules" size="small" :label-width="labelWidth" :disabled="status == 3">
        <el-form-item label="案例名称：" prop="caseName">
          <el-input v-model="addForm.caseName"></el-input>
        </el-form-item>
        <el-form-item label="案例描述：" class="long_form_item">
          <WangEditor v-model="addForm.caseDescription"></WangEditor>
        </el-form-item>
        <el-form-item label="案例照片：" class="long_form_item">
          <ImageUpload v-model="addForm.caseImageUrl" :limit="5" tip="图片尺寸1:1,大小在1M以内"></ImageUpload>
        </el-form-item>
        <el-form-item label="关联医生：" prop="doctorName">
          <doctor-select v-model="addForm.doctorId" @change="onChange" />
        </el-form-item>
        <el-form-item label="城市：" prop="cityId">
          <!-- <doctor-select v-model="addForm.doctorId" @change="onChange" /> -->
          <city-select v-model="addForm.cityId"  />
        </el-form-item>
        <el-form-item label="排序时间：" class="long_form_item" prop="sortTime">
          <el-date-picker v-model="addForm.sortTime" type="datetime" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否上架：" class="long_form_item" prop="isPublished">
          <el-radio-group v-model="addForm.isPublished">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="saveInfo()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->
  </div>
</template>
  <script>
import ImageUpload from "@/components/upload/upload.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import { deepClone, showToast } from "@/common/util";
import DoctorSelect from "@/components/doctor/select.vue";
import CitySelect from '@/components/common/city.vue';
// import { ADD_DOCTOR_FIELD } from "@/common/constants";
// import { IS_RATE_DECIMAL } from "@/common/validator";
import {
  GET_CASE_INFO,
  ADD_CASE_INFO,
  UPDATE_CASE_INFO,
} from "@/http/interface";
export default {
  components: {
    ImageUpload,
    WangEditor,
    DoctorSelect,
    CitySelect
  },
  data() {
    return {
      menus: [{ name: "基础信息", id: 1 }],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      addFormRules: {
        caseName: [
          { required: true, message: "请输入案例名称", trigger: "blur" },
        ],
        doctorName: [
          { required: true, message: "请选择关联医生", trigger: "change" },
        ],
        cityId:[{ required: true, message: "请选择城市", trigger: "change" }],
        sortTime: [
          { required: true, message: "请选择排序时间", trigger: "change" },
        ],
        isPublished: [
          { required: true, message: "请选择是否上架", trigger: "change" },
        ],
      },
      loading: false,
      isDisabled: true,
      status: 1,
      isHidden: false,
      doctorList: [],
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }

    /**
     * 新增：status：1
     * 编辑：status：2
     * 详情：status：3
     */
    this.status = query.status || 1;
    this.isHidden = query.hidden;
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.step = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);
      // 医生图片
      if (o.caseImageUrl && o.caseImageUrl.length) {
        o.caseImageUrl = o.caseImageUrl.toString();
      } else {
        o.caseImageUrl = "";
      }
      return o;
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        let callBack = ADD_CASE_INFO;
        let msg = "新增成功";
        _this.loading = true;

        // 编辑
        if (oParams.id) {
          //oParams.id = query.id;
          callBack = UPDATE_CASE_INFO;
          msg = "编辑成功";
        }

        callBack(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 获取案例详情
    getInfo(id) {
      let _this = this;
      GET_CASE_INFO({ id: id }).then((res) => {
        let _obj = res.data || {};

        // 案例图片
        if (_obj.caseImageUrl) {
          _obj.caseImageUrl = _obj.caseImageUrl.split(",");
        }

        _this.addForm = _obj;
      });
    },

    // 监听医生选择
    onChange(e) {
      console.log(e);
      this.$set(this.addForm, "doctorName", e);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
</style>
<style lang="scss">
.el-popper {
  z-index: 11000 !important;
}
</style>